<template>
  <div id="app" style="font-size:26px;font-weght:bold;margin:30px 0">
    <header class="header">
      <div v-for="(item,index) in topInputList" :key="index" class="everyBox">
        <span class="span">{{item.title}}：</span>
        <el-input  placeholder=""  v-model="item.text" :placeholder="item.title" class="top-input"></el-input>
      </div>
      <div class="everyBox slelctBox">
        <span class="span">类型：</span>
        <el-select  v-model="value1" placeholder="请选择" @change="opctionchangeOne">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
    </header>
    <div class="body">
      <el-table
        v-loading="loading"
        :data="tableData"
        max-height="600"
        border
        fit
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          show-overflow-tooltip
          prop="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="nickname"
          label="用户"
          width="110">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="user_mobile"
          label="手机号"
          width="150">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="type_text"
          label="类型"
          width="100">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="source_id"
          label="来源"
          width="170">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="money"
          label="金额"
          width="90">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="balance"
          label="余额"
          width="90">
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="memo"
          label="描述"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="ctime"
          label="时间"
          width="180"
        >
        </el-table-column>

      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 60,]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      title="退款单查看"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <el-descriptions title="" :column="2">
        <el-descriptions-item label="退款单号">{{ orderDetails.refund_id }}</el-descriptions-item>
        <el-descriptions-item label="用户">{{orderDetails.nickname}}</el-descriptions-item>
        <el-descriptions-item label="退款方式">{{ orderDetails.payment_text }}</el-descriptions-item>
        <el-descriptions-item label="退款金额">{{ orderDetails.money }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ orderDetails.status_text }}</el-descriptions-item>
        <el-descriptions-item label="单号">{{ orderDetails.source_id }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import {balance_list} from "../../../utils/api";

export default {
  name: "accountFunds",
  data(){
    return{
      token:sessionStorage.getItem("token"),
      dialogVisible:false,
      topInputList:[
        {title:'订单号',text:''},
        {title:'手机号',text:''},
      ],
//1用户消费，对应支付单表2;  //用户退款，用余额支付的话，退款类型对应 4;      //提现 5//分销佣金7;    //后台操作8;   //奖励
      options1: [
        {
          value: '111',
          label: '请选择'
        }, {
          value: '4',
          label: '提现'
        }, {
          value: '5',
          label: '分销佣金'
        }, {
          value: '7',
          label: '后台操作'
        }, {
          value: '8',
          label: '奖励'
        }],

      value1: '',
      loading: true,
      tableData: [],
      limit:10,
      currentPage:1,
      total:0,
      orderDetails:{},
    }
  },
  methods:{
    checkOrder(row){
      this.dialogVisible = true
      this.orderDetails = row
      // console.log(this.orderDetails)
    },
    handleClose(){
      this.dialogVisible = false
      this.orderDetails={}
    },
    handleSizeChange(val) {
      this.limit = val
      // console.log(`每页 ${val} 条`);
      this.getList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.value1,this.topInputList[1].text,)
    },
    // 第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.value1,this.topInputList[1].text,)
    },
    search(){
      this.getList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.value1,this.topInputList[1].text,)

    },
    opctionchangeOne(e){

    },
    handleSelectionChange(){

    },
    getList(token,page,limit,source_id,type,mobile){
      this.loading = true
      balance_list(token,page,limit,source_id,type,mobile).then(res=>{
        if(res.data.status){
          // console.log(res.data.data.data)
          this.tableData = res.data.data.data
          this.total = res.data.data.count
          this.tableData.forEach(item=>{
            if(item.type==4){
              item.type_text = '提现'
            }
            if(item.type==5){
              item.type_text = '分销佣金'
            }
            if(item.type==7){
              item.type_text = '后台操作'
            }
            if(item.type==8){
              item.type_text = '奖励'
            }
            if(item.type==1){
              item.type_text = '消费'
            }
          })
          let timer = setTimeout(()=>{
            this.loading = false
            clearTimeout(timer)
          },400)
        }else{
          if(res.data.msg =="token失效,请重新进行登录"){
            this.$router.push("/login");
          }
          this.$message.error(res.data.msg)
          this.loading = false
        }
      })
    },
    // 退款按钮

  },
  created() {
    this.getList(this.token,this.currentPage,this.limit,this.topInputList[0].text,this.value1,this.topInputList[1].text,)
  },
  watch:{
    value1(n,o){
      if(n==111){
        this.value1 = ''
      }
      this.status = this.value1
    },

  }
}
</script>

<style scoped>
.body{
  margin: 20px 0;
}
.slelctBox{
  margin: 0 10px;
}
.everyBox{
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.header .span{
  font-size: initial;
}
/deep/.header{
  background: white!important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.top-input{
  width: 150px;
  margin-right: 20px;
}
/deep/.el-table th.el-table__cell>.cell{
  text-align: center;
}
/deep/.el-table .cell.el-tooltip{
  text-align: center;
}
/deep/.el-table--border .el-table__cell:first-child .cell{
  text-align: center;
}
/deep/.el-table--enable-row-transition .el-table__body td.el-table__cell{
  text-align: center;
}
.contentBox{
  width: 50%;
}
.contentBox .span{
  width: 40%;
}
</style>
